<template>
    <form @submit.prevent="$emit('save', formData)">
      <div class="form-group">
        <label>用户名</label>
        <input v-model="formData.username" required>
      </div>
      
      <div class="form-group">
        <label>邮箱</label>
        <input v-model="formData.email" type="email" required>
      </div>
      
      <div class="form-actions">
        <button type="button" @click="$emit('cancel')">取消</button>
        <button type="submit">保存</button>
      </div>
    </form>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  
  const props = defineProps({
    user: {
      type: Object,
      required: true
    }
  })
  
  const emit = defineEmits(['save', 'cancel'])
  
  const formData = ref({
    username: '',
    email: ''
  })
  
  // 当传入的用户数据变化时更新表单
  watch(() => props.user, (newUser) => {
    formData.value = { ...newUser }
  }, { immediate: true })
  </script>
  
  <style scoped>
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group label {
    display: block;
    margin-bottom: 5px;
  }
  
  .form-group input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }
  </style>